<template>
  <div class="dashboard-editor-container">
    <div class="head_color">
      <div class="head_center">
        <div class="head_title" style="float: left;cursor: pointer;" @click="toFYLZ">
          {{sysName}}
        </div>
        <div style="float: right;">
          <el-menu :default-active="activeIndex"
                   router
                   class="el-menu-demo" mode="horizontal"
                   background-color="#006BB7"
                   text-color="#EAF2ED"
                   active-text-color="#ffd04b">
            <el-menu-item index="/planeFace">平面图</el-menu-item>
            <el-menu-item index="/monitorVideo">监控一览</el-menu-item>
            <el-menu-item index="/monitorVideoGz">关注监控</el-menu-item>
            <el-menu-item index="/frontEndIndex">设备列表</el-menu-item>
            <el-menu-item @click="toGFBC">共富班车</el-menu-item>
            <el-menu-item index="/relFace">发布界面</el-menu-item>
            <el-menu-item index="/index">后台管理</el-menu-item>
            <el-menu-item >
              <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
                <div style="color: #EAF2ED;">
                  系统管理员
                  <i class="el-icon-caret-bottom" style="color: #EAF2ED;" />
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item divided >
                    <span><a href="WebComponentsKit.exe" target="_blank" download="WebComponentsKit.exe">视频组件</a></span>
                  </el-dropdown-item>
                  <el-dropdown-item divided @click.native="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-menu-item>

          </el-menu>
        </div>
      </div>
    </div>

    <div style="width: 1918px;margin-left: auto;margin-right: auto;">
        <!-- 引入组件. :lock-aspect-ratio="true"：锁定纵横比例 :resizable="false": 不可缩放-->
        <vue-draggable-resizable
          w="auto"
          h="auto"
          :grid="[20,40]"
          :resizable="false"
          :draggable="false"
        >
<!--          <img :src="pmtUrl" style="width: 1150px;height: 633px;">-->
          <img :src="pmtUrl" style="width: 1918px;height: 1012px;">
          <div v-for="collectPoint in collectPointList" style="position:absolute;" :style="{top:collectPoint.longitude+'px',left:collectPoint.latitude+'px'}" v-if="collectPoint.ispmt=='Y'" >
            <div>
              <img :src="pic" @click="clickSite(collectPoint)" style="cursor: pointer;">
            </div>

            <div style="margin-left: 3px;">
              <div style="width:8px;height:10px;box-sizing:border-box;
                  background:linear-gradient(120deg,transparent 58.5%,#0099FF 58.5%,rgba(0,175,255,0.60) 61.5%); float: left"></div>
              <div style="width:8px;height:10px;box-sizing:border-box;
                background:linear-gradient(-120deg,transparent 58.5%,#0099FF 58.5%,rgba(0,175,255,0.60) 61.5%); float: left"></div>
            </div>

            <div @click="clickSite(collectPoint)" style="clear: both;color: white;font-size: 12px;border: 1px solid #027afc;border-radius: 5px;padding: 5px;background-color: rgba(0,175,255,0.6);cursor: pointer;">
              {{collectPoint.name}}
            </div>

          </div>

          <div style="position:absolute;" :style="{top:(parseInt(collectPoint.longitude)-30)+'px',left:(parseInt(collectPoint.latitude)+30)+'px'}" >
            <div @click="clickSiteCrol(collectPoint)" style="color: white;font-size: 12px;border: 1px solid #027afc;border-radius: 5px;padding: 5px;background-color: rgba(0,175,255,0.6);cursor: pointer;">
              6#控制
            </div>
            <div style="margin-left: 3px;">
              <div style="width:8px;height:10px;box-sizing:border-box;
                  background:linear-gradient(60deg,transparent 58.5%,#0099FF 58.5%,rgba(0,175,255,0.60) 61.5%); float: left"></div>
              <div style="width:8px;height:10px;box-sizing:border-box;
                background:linear-gradient(-60deg,transparent 58.5%,#0099FF 58.5%,rgba(0,175,255,0.60) 61.5%); float: left"></div>
            </div>
            <div style="clear: both;">
              <img :src="pic" @click="clickSiteCrol(collectPoint)" style="cursor: pointer;">
            </div>
          </div>

        </vue-draggable-resizable>
    </div>

    <el-dialog :visible.sync="detailOpen" v-if="detailOpen" width="1918px" :center="true" append-to-body @close='closeDetailDialog'>
      <siteDetail ref="refSiteDetail" :collectPoint="collectPointVo" />
    </el-dialog>

    <el-dialog :visible.sync="detailCrolOpen" v-if="detailCrolOpen" width="1918px" :center="true" append-to-body @close='closeDetailCrolDialog'>
      <siteDetailCrol ref="refSiteDetailCrol" :collectPoint="collectPoint" />
    </el-dialog>

  </div>
</template>

<script>
  import { getSysConfig } from "@/api/basic/sysConfig";
  import VueDraggableResizable from "vue-draggable-resizable";
  import { listCollectPointAndStatus } from "@/api/basic/collectPoint";
  import siteDetail from "./siteDetail";
  import siteDetailCrol from "./siteDetailCrol";
  const defaultSettings = require('@/settings.js');

export default {
  name: "PlaneFace",
  components: {
    VueDraggableResizable,siteDetail,siteDetailCrol
  },
  data() {
    return {
      pointId:15,
      collectPoint:{},
      sysName: defaultSettings.title,
      activeIndex: '/planeFace',
      pic:require('@/assets/image/area.png'),
      pmtUrl:require('@/assets/image/pmt.png'),
      collectPointList:[],
      collectPointStatusMap:{},
      realDatas:{},
      detailTitle:'',
      detailOpen:false,
      detailCrolOpen:false,
      collectPointVo:{}
    };
  },
  created() {
    this.getPmtUrl();
    this.getList();
  },
  methods: {
    toFYLZ(){
      window.open('https://fylz.zjagri.cn/ppthtml/index.html','_blank')
    },
    toGFBC(){
      window.open('https://www.danss.work/lszx/','_blank')
    },
    getPmtUrl(){
      getSysConfig().then(response => {
        if(response.data.pmtPic!=undefined && response.data.pmtPic!=''){
          this.pmtUrl = response.data.pmtPic;
        }
      });
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      })
    },
    getList() {
      listCollectPointAndStatus().then(response => {
        this.collectPointList = response.collectPoints;
        this.collectPoint = this.collectPointList.find(item=>item.id == 15)
        this.collectPointStatusMap = response.collectPointStatus;
        this.realDatas = response.realDatas;
      });
    },
    clickSite(collectPoint){
      this.collectPointVo = collectPoint;
      this.detailOpen=true;
    },
    clickSiteCrol(){
      this.detailCrolOpen=true;
    },
    closeDetailDialog(){
      this.$refs.refSiteDetail.clickStopRealPlay();
      this.$refs.refSiteDetail.onLogout();
    },
    closeDetailCrolDialog(){
      this.$refs.refSiteDetailCrol.clickStopRealPlay();
      this.$refs.refSiteDetailCrol.onLogout();
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss">
  .vdr {
    border: none;
  }
  .el-dialog:not(.is-fullscreen) {
    margin-top:0vh !important;
  }
</style>

